Critical Rendering Path

Hiểu cách trình duyệt parse HTML, xây dựng DOM & CSSOM, và paint pixel lên màn hình.

💡 Mở DevTools → tab Performance, ghi lại trace, sau đó click các nút bên dưới để quan sát sự kiện reflow và repaint trong timeline.

Luồng Render (Rendering Pipeline)

Parse HTMLTokenize HTML → xây dựng DOM tree

Parse CSSParse stylesheet → xây dựng CSSOM tree

Render TreeKết hợp DOM + CSSOM, bỏ qua node ẩn

LayoutTính toán vị trí & kích thước phần tử (Box Model)

PaintXác định cách vẽ từng phần tử

LayerizeTạo cây compositor layer

CompositeGPU thread vẽ các layer lên màn hình

Box 1

Box 2

Box 3

Tab Performance — Ghi trace để xem sự kiện Layout, Paint, Composite trong timeline
Tab Network — Quan sát thứ tự fetch tài nguyên HTML, CSS, JS
Tab Rendering — Bật "Paint flashing" để highlight vùng được repaint bằng màu xanh
Tab Layers — Kiểm tra compositor layer do trình duyệt tạo ra